<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>NetFlow 统计信息 - 调试版</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .chart-container { width: 100%; height: 400px; margin-bottom: 20px; }
        #debug-info { 
            background-color: #f0f0f0; 
            padding: 10px; 
            margin-top: 20px; 
            white-space: pre-wrap; 
        }
    </style>
</head>
<body>
    <h2>NetFlow 统计信息 - 调试版</h2>
    
    <div class="chart-container" id="traffic_chart"></div>
    <div class="chart-container" id="app_chart"></div>
    <div class="chart-container" id="queue_chart"></div>
    <div class="chart-container" id="drop_chart"></div>

    <div id="debug-info"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        // 调试日志函数
        function debugLog(message) {
            console.log(message);
            document.getElementById('debug-info').textContent += message + '\n';
        }

        // 创建安全的图表初始化函数
        function safeInitChart(elementId, option) {
            try {
                debugLog(`尝试初始化图表: ${elementId}`);
                var chartDom = document.getElementById(elementId);
                
                if (!chartDom) {
                    debugLog(`错误：未找到元素 ${elementId}`);
                    return null;
                }
                
                var chart = echarts.init(chartDom);
                
                if (!chart) {
                    debugLog(`错误：初始化 ${elementId} 失败`);
                    return null;
                }
                
                chart.setOption(option);
                debugLog(`图表 ${elementId} 初始化成功`);
                return chart;
            } catch (error) {
                debugLog(`初始化 ${elementId} 发生错误: ${error.message}`);
                return null;
            }
        }

        // 页面加载完成后执行
        window.onload = function() {
            debugLog('页面加载完成');
            
            // 检查 ECharts 是否可用
            if (typeof echarts === 'undefined') {
                debugLog('错误：ECharts 未加载');
                return;
            }

            // 流量统计图表
            var trafficChart = safeInitChart('traffic_chart', {
                title: { text: '近24小时流量统计' },
                xAxis: { 
                    type: 'category', 
                    data: ['00:00', '01:00', '02:00', '03:00'] 
                },
                yAxis: { type: 'value' },
                series: [{
                    type: 'line',
                    data: [100, 200, 150, 180]
                }]
            });

            // 应用流量图表
            var appChart = safeInitChart('app_chart', {
                title: { text: '应用流量分布' },
                series: [{
                    type: 'pie',
                    data: [
                        { value: 335, name: '视频会议' },
                        { value: 310, name: '语音通话' },
                        { value: 274, name: '网页浏览' }
                    ]
                }]
            });

            // 队列统计图表
            var queueChart = safeInitChart('queue_chart', {
                title: { text: '优先级队列统计' },
                xAxis: { 
                    type: 'category', 
                    data: ['最高', '高', '普通', '低'] 
                },
                yAxis: { type: 'value' },
                series: [{
                    type: 'bar',
                    data: [100, 80, 60, 40]
                }]
            });

            // 丢包统计图表
            var dropChart = safeInitChart('drop_chart', {
                title: { text: '丢包统计' },
                xAxis: { 
                    type: 'category', 
                    data: ['最高', '高', '普通', '低'] 
                },
                yAxis: { type: 'value' },
                series: [{
                    type: 'bar',
                    data: [5, 10, 15, 20]
                }]
            });
        };
    </script>
</body>
</html>
